<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>解读书库</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.flex-con {
				overflow: auto
			}
			
			#tabbar {
				text-align: center;
				padding: 10px 0 0 0;
				height: auto
			}
			
			.tab {
				align: center;
				height: 3.5rem;
				line-height: 3rem;
				font-weight: 500;
				color: #282828;
			}
			
			.command {
				font-size: 1.5rem;
				margin-left: 1.3rem;
				margin-right: 1.3rem;
				box-sizing: border-box;
			}
			
			.tab div.active {
				color: #282828;
				font-weight: 700;
				border-width: 0 0 2px 0;
				border-style: solid;
				border-color: #282828;
			}
			
			.dd {
				font-size: :18px;
			}
		</style>
		<style>
			/**最新与销量切换样式 start*/
			
			.alltab {
				height: 6rem;
				margin: 2rem 0 0 0;
				width: 100%;
				padding-left: 0;
				padding-right: 0;
			}
			
			.alltab .alltab_menu {
				height: 4rem;
				width: 100%;
			}
			
			.alltab .alltab_menu ul {
				height: 4rem;
				width: 50%;
				padding-left: 0;
				padding-right: 0;
			}
			
			.alltab .alltab_menu ul li {
				padding-left: 0;
				padding-right: 0;
				float: left;
				width: 50%;
				text-align: center;
				line-height: 3rem;
				margin-top: 0.5rem;
				font-size: 1.5rem;
				color: #28282;
				border: 1px solid black;
				list-style-type: none;
			}
			
			.alltab .alltab_menu ul li:first-child {
				border-radius: 4% 0 0 4% /15% 0 0 15%;
				border-right: none;
				width: 50%;
				margin-left: 0;
				margin-right: 0;
			}
			
			.alltab .alltab_menu ul li:last-child {
				border-radius: 0 4% 4% 0/ 0 15% 15% 0;
				border-left: none;
				width: 50%;
				margin-left: 0;
				margin-right: 0;
			}
			
			.alltab .alltab_menu ul li.on {
				background: #282828;
				margin-top: 0.5rem;
				line-height: 3rem;
				font-size: 1.5rem;
				color: white;
			}
		</style>
	</head>

	<body>

		<div id="main" class="flex-con">

			<div class="tabcontent">
				<div class="alltab">
					<div align="center" class="alltab_menu">
						<ul>
							<li class="on">最新</li>
							<li>最热</li>
						</ul>
					</div>
				</div>
				<div class="tabbox">
					<div class="scrollload-containernew tabcontent">
						<div class="scrollload-contentnew" id="tabboxNew" style="overflow: hidden;">

						</div>
					</div>
				</div>
			</div>

		</div>
		<div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 3000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;">请先登录！</div>

		<script type="text/html" id="tabBox_tem">
			{{each bookArr}}
			<div class="col-xs-12 bookdetail" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}} style="padding-right: 12px;padding-left: 12px;height: 13.7rem;">
				<div class="col-xs-4" style="height: 12rem;width: 29.333%;padding: 0;">
					<a href="javascript:;" style="display:block;height: 100%;">
						<img src="{{$value.bookimg | addUrl}}" style="width: 9rem;height: 11.5rem;box-shadow: 3px 3px 3px #e6e6e6;border: 0;vertical-align: middle;">
						<em style="position: absolute;display: block;width: 1.5rem;height: 1.5rem;bottom: 0.65rem;right: 1.8rem;background: url(icon/listen.png) center center no-repeat;background-size: 100%;"></em>
					</a>
				</div>
				<div class="col-xs-8" style="padding:0;position:relative;left:1.2rem;margin: 0;height:12rem;width: 68.666%;">
					<div class="col-xs-12" style="padding: 0;margin: 0;">
						<p style="font-family: bolder;font-size: 1.6rem;color: #282828;margin-bottom: 0;margin-top: 0.5rem;font-weight: bold;">{{$value.bookname}}</p>
						<p class="aui-ellipsis-2" style="position: relative;top:0.3rem;font-size:1.4rem;color: #666;margin-top: 0.33rem;height: 4.2rem;">{{$value.bookrecommend}}</p>
					</div>
					{{if progessArr[$index] == 0}}
					<div class="col-xs-7" style="position:absolute;bottom:0;padding: 0;margin: 0;">
						<p style="font-size: 1.3rem;color: #999999;margin: 0;margin-bottom: 0.5rem;">{{$value.videoduration}}</p>
					</div>
					{{else}}
					<div class="col-xs-7" style="position:absolute;bottom:0;padding: 0;margin: 0;">
						<p style="font-size: 1.3rem;color: #999999;margin: 0;margin-bottom: 0.5rem;">{{$value.videoduration + " " + progessArr[$index]}}</p>
					</div>
					{{/if}}
					{{if userVip.type==1||$value.isorder==1}}
					<div class="buy" data-isactivity={{$value.book_activity}} data-isorder={{$value.isorder}} data-bookid={{$value.bookid}} style="position: absolute;right: 0.5rem;bottom: 0.5rem;width: 7.8rem;height:2.5rem;background-image: linear-gradient(-179deg, #F7BA64 0%, #fbd454 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 100px;text-align: center;color: #333333;line-height: 2.7rem;font-weight: bold;">
						开始听书
					</div>
					{{else}}
					<div style="position: absolute;right: 0.5rem;bottom: 0.8rem;width: 7.8rem;height:1.5rem;font-size: 1.4rem; font-weight: bold; text-align: center;color: #ED8434;">
						{{"¥ " + $value.bookprice}}
					</div>
					{{/if}}
				</div>
			</div>
			{{/each}}
		</script>
	</body>
</html>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
<script src="js/out7.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var toast = new auiToast();
	var type = 1;
	var page;
	
	var refreshUpOrDown = function(){
		
		       var bookList_refresh = new Scrollload({
    	               container: document.querySelector('.scrollload-containernew'),
		           content: document.querySelector('.scrollload-contentnew'),
		           noMoreDataHtml : '<div id="slogen" align="center" class="col-xs-12" style="padding-bottom: 3.75rem;padding-top:2rem;height: 1.17rem; width:92%;font-size:1.4rem;left:4%">'+
			              slogenFont[rand(0,slogenFont.length)]+
						  '</div>',
                   loadMore:function(refreshUp){//上拉加载
        	               if (page >= 2) {
        	    	               getBookListUp(refreshUp);
        	               }
                   },
                   enablePullRefresh: true,
                   pullRefresh:function(refreshDown){//下拉刷新
        	           getBookListDown(refreshDown);
        	           refreshDown.refreshComplete()
                   }
                 });
	          }
	
	var getBookListUp = function(refreshUp){//上拉加载
    	                $.ajax({
			              type:"get",
			              url:hostUrl + "product/book/list?openId=" + openId + "&rows=10&page=" + page + "&type=" + type,
			              async:true,
			              success:function(data){
				          if (data.status != 0 || !data.data.book_list.length) {
					       if (refreshUp) {
						       refreshUp.noMoreData()
					       }
					        return;
				          }
				         data.userVip=userVip
				         bookArr = bookArr.concat(data.data.book_list);
				         if (window.localStorage) {
					var progess;
					var bookid;
					var bookCount;
					var progessStr;
					var progessArr = new Array();
					for (var i = 0; i < bookArr.length; i ++) {
						bookid = bookArr[i]["bookid"];
						bookCount = localStorage.getItem(bookid + "_count");
						bookCount = parseInt(bookCount);
						progess = 0;
						if (bookCount) {
							for (var j = 0; j < bookCount; j ++) {
								var value = localStorage.getItem(bookid + "_" + j);
								if (value) {
									var timeArr = value.split("_");
									if (timeArr.length == 2) {
										currentTime = parseInt(timeArr[0]);
			                            duration = parseInt(timeArr[1]);
			                            progess += parseInt((currentTime * 100) / duration);
									}
								}
								if (j == bookCount - 1) {
									if (progess == 0 || !progess) {
			                        	   progessStr = "0";
			                        	}else {
			                        		if (parseInt(progess / bookCount) >= 100) {
			                        			progessStr = "已听完";
			                        		}else {
			                        			progessStr = "已听" + parseInt(progess / bookCount) + "%";
			                        		}
			                        	}
			                    }
							}
						} else{
							progessStr = "0";
						}
						progessArr.push(progessStr);
					}
				}
				data.progessArr = progessArr;
				         data.bookArr = bookArr;
				         var booklist_tem = template("tabBox_tem",data);
				         document.getElementById('tabboxNew').innerHTML = booklist_tem;
				         page ++;
				         if (refreshUp) {
					         refreshUp.unLock()
				         }
			          }
		           });
            }
    
    var getBookListDown = function(refreshDown){//下拉刷新
    	   toast.loading({
			title: "加载中",
			duration: 2000
		});
    	
    	   $.ajax({
			type:"get",
			url:hostUrl + "product/book/list?openId=" + openId + "&rows=10&page=1" + "&type=" + type,
			async:true,
			success:function(data){
				toast.hide();
				if (data.status != 0) {
					return;
				}
				page = 2;
				data.userVip=userVip
				bookArr = data.data.book_list;
				if (window.localStorage) {
					var progess;
					var bookid;
					var bookCount;
					var progessStr;
					var progessArr = new Array();
					for (var i = 0; i < bookArr.length; i ++) {
						bookid = bookArr[i]["bookid"];
						bookCount = localStorage.getItem(bookid + "_count");
						bookCount = parseInt(bookCount);
						progess = 0;
						if (bookCount) {
							for (var j = 0; j < bookCount; j ++) {
								var value = localStorage.getItem(bookid + "_" + j);
								if (value) {
									var timeArr = value.split("_");
									if (timeArr.length == 2) {
										currentTime = parseInt(timeArr[0]);
			                            duration = parseInt(timeArr[1]);
			                            progess += parseInt((currentTime * 100) / duration);
									}
								}
								if (j == bookCount - 1) {
									if (progess == 0 || !progess) {
			                        	   progessStr = "0";
			                        	}else {
			                        		if (parseInt(progess / bookCount) >= 100) {
			                        			progessStr = "已听完";
			                        		}else {
			                        			progessStr = "已听" + parseInt(progess / bookCount) + "%";
			                        		}
			                        	}
			                    }
							}
						} else{
							progessStr = "0";
						}
						progessArr.push(progessStr);
					}
				}
				data.progessArr = progessArr;
				data.bookArr = bookArr;
				var booklist_tem = template("tabBox_tem",data);
				document.getElementById('tabboxNew').innerHTML = booklist_tem;
				if (refreshDown != 1) {
					if (refreshDown) {
					    refreshDown.refreshData();
					    refreshDown.unLock()
				    }else{
					    refreshUpOrDown();
				    }
				}
			}
		});
    }
    getToken(getBookListDown);

		$(".alltab_menu ul li").click(function() {
			$(this).addClass("on").siblings().removeClass("on");
			var index = $(this).index();
			type = index + 1;
			$(".tabbox > div").eq(index).show().siblings().hide();
			getBookListDown(1);
		});

		$("#main").on('click', '.bookdetail', function() {
			window.location.href = "bookDetail.html?bookid=" + $(this).attr('data-bookid') + "&videoauthorid=" + $(this).attr('data-videoauthorid') + "&copywriter=" + $(this).attr('data-copywriter');
		})
		$("#main").on('click', '.buy', function(e) {
			e.stopPropagation();
			var parent=$(this).parents('.bookdetail')
			window.location.href = "chapter.html?bookid=" + $(this).attr('data-bookid') + "&videoauthorid=" +$(this).parents('.bookdetail').attr('data-videoauthorid') + "&copywriter=" + $(this).parents('.bookdetail').attr('data-copywriter')+"&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg');
		})
</script>